<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '新增地址',
  },
}
</route>

<template>
  <!-- 导航栏 -->
  <customHeader title="新增地址"></customHeader>

  <!-- 新增地址输入框 -->
  <view class="addLocation position-relative bg-default flex-1">
    <wd-form ref="form" :custom-class="'customFrom'" :model="state.model">
      <wd-cell-group custom-class="mt-20rpx pt-20rpx pb-20rpx">
        <wd-input
          custom-class="customInput"
          custom-input-class="customInputView"
          custom-label-class="customLabelView"
          label="收货地址"
          label-width="180rpx"
          prop="value1"
          clearable
          suffix-icon="location"
          v-model="state.model.value1"
          @clicksuffixicon="handleIconClick"
          placeholder="请选择收货地址"
          :rules="[{ required: true, message: '请定位收货地址' }]"
        />
        <wd-input
          custom-class="customInput"
          custom-input-class="customInputView"
          custom-label-class="customLabelView"
          label="详细地址"
          label-width="180rpx"
          prop="value2"
          clearable
          v-model="state.model.value2"
          placeholder="请输入详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        />

        <wd-input
          custom-class="customInput"
          custom-input-class="customInputView"
          custom-label-class="customLabelView"
          label="联系人"
          label-width="180rpx"
          prop="value3"
          clearable
          v-model="state.model.value3"
          placeholder="请输入联系人"
          :rules="[{ required: true, message: '请填写联系人' }]"
        />

        <wd-input
          custom-class="customInput"
          custom-input-class="customInputView"
          custom-label-class="customLabelView"
          label="手机号码"
          label-width="180rpx"
          prop="value4"
          clearable
          v-model="state.model.value4"
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
      </wd-cell-group>
      <wd-cell-group custom-class="mt-20rpx">
        <wd-cell
          title="设为默认地址"
          title-width="280rpx"
          prop="value5"
          center
          custom-class="customInput"
          custom-input-class="customInputView"
          custom-label-class="customLabelView"
        >
          <view class="flex justify-end items-center">
            <wd-switch
              size="20px"
              :active-value="true"
              :inactive-value="false"
              v-model="state.model.value5"
            />
          </view>
        </wd-cell>
      </wd-cell-group>
      <view class="footer"></view>
    </wd-form>
  </view>

  <!-- 新增按钮 -->
  <view
    @click="handleSubmit"
    class="addButton w-590rpx h-80rpx line-height-80rpx text-center font-size-36rpx color-white bg-primary"
  >
    保存
  </view>
</template>

<script lang="ts" setup>
import { useToast } from 'wot-design-uni'

const toast = useToast()

const state = reactive({
  option: {},
  model: {
    value1: '',
    value2: '',
    value3: '',
    value4: '',
    value5: true,
  },
})

const form = ref()

const handleSubmit = () => {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        toast.show('校验通过')
      }
    })
    .catch((error) => {
      console.log(error, '校验没通过')
    })
}

// onLoad 参数
onLoad((option) => {
  state.option = JSON.parse(option.query)
  console.log(state.option, 'state.option')
})

// 跳转新增地址
const handleIconClick = () => {
  console.log('定位当前地址')
  uni.navigateTo({ url: '/pages/common/mapLocation/index' })
}
</script>

<style lang="scss">
.addButton {
  position: fixed;
  right: 0;
  bottom: 66rpx;
  left: 0;
  z-index: 999;
  display: block;
  margin: 0 auto;
  border-radius: 40rpx;
}
</style>
